<template>
	<view style="display: inline-block;">
		<view :style="[model[size],
		{backgroundColor: backgroundColor,
		 color: textColor,
		 paddingTop: model[size].paddingTB,
		 paddingBottom: model[size].paddingTB,
		 paddingRight: model[size].paddingLR,
		 paddingLeft: model[size].paddingLR
		 }]" class="tag" :class="isButton?'button':''">
			<view v-if="isIcon" :style="{marginBottom: model[size]['iconFonBottom'],marginTop: model[size]['iconFonTop']}" class="icon-view">
				<text :style="{fontSize:model[size]['iconSize']}"  class="iconfont" :class="data[config.icon]"></text>
			</view>
			<view class="tag-text" :style="{marginLeft:model[size]['marginLeft'],marginRight:model[size]['marginRight'],paddingTop:model[size]['textPaddingTop'],paddingBottom:model[size]['textPaddingBottom']}">
				<text  v-text="data[config.name]" >
				</text>
			</view>
			<view v-if="isDel" class="tag-icon">
				<text :style="{fontSize:model[size].closeIconSize}" class="iconfont iconguanbi" ></text>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//规格参数
				model:{
					large:{
						//文字大小
						fontSize: "46upx",
						//关闭按钮大小
						closeIconSize: "46upx",
						//标签边框圆角
						borderRadius: "46upx",
						//标签大小
						iconSize: "45upx",
						//标签左右内边距
						paddingLR: "20upx",
						//标签上下内边距
						paddingTB: "0upx",
						//icon标签下外边距
						iconFonBottom:"0upx",
						//icon标签上外边距
						iconFonTop: "0upx",
						//文本左边距
						marginLeft: "5upx",
						//文本右边距
						marginRight: "5upx",
						//文本上内边距
						textPaddingTop: "0upx",
						//文本下内边距
						textPaddingBottom: "5upx",
					},
					default:{
						//文字大小
						fontSize: "36upx",
						//关闭按钮大小
						closeIconSize: "36upx",
						//标签边框圆角
						borderRadius: "36upx",
						//标签大小
						iconSize: "35upx",
						//标签左右内边距
						paddingLR: "20upx",
						//标签上下内边距
						paddingTB: "0upx",
						//icon标签下外边距
						iconFonBottom:"0upx",
						//icon标签上外边距
						iconFonTop: "0upx",
						//文本左边距
						marginLeft: "5upx",
						//文本右边距
						marginRight: "5upx",
						//文本上内边距
						textPaddingTop: "0upx",
						//文本下内边距
						textPaddingBottom: "3upx",
						
					},
					small:{
						//文字大小
						fontSize: "26upx",
						//关闭按钮大小
						closeIconSize: "26upx",
						//标签边框圆角
						borderRadius: "26upx",
						//标签大小
						iconSize: "35upx",
						//标签左右内边距
						paddingLR: "20upx",
						//标签上下内边距
						paddingTB: "0upx",
						//icon标签下外边距
						iconFonBottom:"0upx",
						//icon标签上外边距
						iconFonTop: "0upx",
						//文本左边距
						marginLeft: "5upx",
						//文本右边距
						marginRight: "5upx",
						//文本上内边距
						textPaddingTop: "0upx",
						//文本下内边距
						textPaddingBottom: "1upx",
					},
					mini:{
						//文字大小
						fontSize: "16upx",
						//关闭按钮大小
						closeIconSize: "16upx",
						//标签边框圆角
						borderRadius: "16upx",
						//标签大小
						iconSize: "20upx",
						//标签左右内边距
						paddingLR: "5upx",
						//标签上下内边距
						paddingTB: "0upx",
						//icon标签下外边距
						iconFonBottom:"0upx",
						//icon标签上外边距
						iconFonTop: "0upx",
						//文本左边距
						marginLeft: "2upx",
						//文本右边距
						marginRight: "2upx",
						//文本上内边距
						textPaddingTop: "0upx",
						//文本下内边距
						textPaddingBottom: "0upx",
					}
					
				}
				
			}
		},
		props:{
			data:{
				type:Object
			},
			/**
			 * 标签配置
			 */
			config:{
				default: ()=>{
					return {
					    name: "name",
						icon: "icon"
				     }
				},
				type: Object
			},
			/**
			 * 标签大小  mini 超小 < small 小的 < default 默认 < large较大
			 */
			size:{
				default: "default",
				type: String
			},
			/**
			 * 背景颜色
			 *
			 */
			backgroundColor:{
				default: "#007AFF",
				type: String
			},
			/**
			 * 文字颜色
			 */
			textColor:{
				default: "#FFFFFF",
				type: String
			},
			/**
			 *  是否存在删除icon
			 */
			isDel: false,
			/**
			 * 是否存在icon
			 */
			isIcon: false,
			isButton: false
		},
		watch:{
			
		},
		mounted() {
			
		},
		methods: {
	
		}
	}
</script>

<style scoped>
	.tag{
		display: inline-flex;
		flex-direction: row ;
	}
	.tag-text{
		flex: 1;
		/* vertical-align: center; */
	}
	.button:active{
		background-color: #3366cc !important;
	}
	.tag-icon{
	}
</style>
